---
import Layout from "@layouts/Layout.astro";
import Container from "@components/container.astro";
import Breadcrumb from "@components/breadcrumb.vue";
import _1 from "@assets/automotiveElectronics/1.png";
import _2 from "@assets/automotiveElectronics/2.png";
import _3 from "@assets/automotiveElectronics/3.png";
import _4 from "@assets/automotiveElectronics/4.png";
import _5 from "@assets/automotiveElectronics/5.png";
const itemList = [
  {
    name: "智能座舱域控制器",
    img: _5,
  },
  {
    name: "域控制器SOC",
    img: _2,
  },
  {
    name: "T-BOX",
    img: _3,
  },
  {
    name: "LED车灯",
    img: _4,
  },
  {
    name: "前装音响系统",
    img: _1,
  },
];
import A0 from "@components/programme/0.vue";
---

<Layout title="About">
  <Container>
    <Breadcrumb client:only/>
    <div class="item mb-[24px]">
      <div class="title">汽车电子解决方案</div>
      <div class="title second-title">概述</div>
      <div class="mb-[20px]">
        艾诺半导体推出了多款DC-DC解决方案，通过优化元件的设计和选择，能够实现更高的功率密度，更小的原件尺寸和重量，使其更适于车辆内部的安装和使用。这些充电解决方案支持广泛的输入电压范围，广泛适用于智能座舱、前装音响、汽车底盘等领域,具有极强的普适性。
      </div>
      <div class="title second-title">特色应用</div>
      <div>智能座舱、前装音响、汽车底盘</div>
    </div>
    <div class="item">
      <div class="title second-title text-center">方框图</div>
      <div class="text-center">查找适用于您系统的产品和参考设计</div>
      <div class="mt-[14px] flex justify-between">
        {
          itemList.map((item, index) => (
            <div class={index === 0?'checked row':'row'}>
              <div class="img-box">
                <img src={item.img.src} alt="" class="w-[206px] h-[98px]" />
                </div>
                <div>
                    <div class="title text-center mt-[24px]" style="margin-bottom: 0">{item.name}</div>
                    <div class="title text-center">电源解决方案</div>

                </div>
            </div>
          ))
        }
      </div>
      <A0 client:load/>
    </div>
  </Container>
</Layout>
<style lang="scss" scoped>
  .item {
    box-sizing: border-box;
    padding: 16px 14px;
    border-radius: 8px;
    opacity: 1;
    background: #ffffff;
    box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.3);
    padding-bottom: 28px;
    .title {
      font-size: 20px;
      color: #3d3d3d;
      font-weight: 500;
      margin-bottom: 10px;
    }
    .second-title {
      font-size: 18px;
    }
    .row {
      width: 218px;
      height: 254px;
      border: 1px solid #D8D8D8;
      padding-top: 16px;
      border-radius: 8px;
      .img-box{
        border-bottom: 1px solid #D8D8D8;
        height: 128px;
        padding-left: 6px;
        padding-right: 6px;
        box-sizing: border-box;
      }
      &:hover {
        box-shadow: 0px 1px 4px 0px #712c2f;
      }
      &.checked{
        box-shadow: 0px 1px 4px 0px #712c2f;
        
      }
    }
  }
</style>
